<template>
  <div class="step-nav">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'stepNav',
  model: {
    prop: 'activedIdx',
    event: 'actived-change',
  },
  provide() {
    return {
      onStepClick: this.onStepClick,
    }
  },
  props: {
    arrivedIdx: {
      type: Number,
    },
    activedIdx: {
      type: Number,
    },
  },
  data() {
    return {
      activedIdxInner: 0,
      inited: false,
    }
  },
  computed: {
    maxStepIdx() {
      if (this.arrivedIdx !== undefined) {
        return this.arrivedIdx
      }
      return this.activedIdx
    },
  },
  watch: {
    activedIdx(val) {
      this.activedIdxInner = val
    },
  },
  created() {
    this.activedIdxInner = this.activedIdx
  },
  mounted() {},
  methods: {
    onStepClick(idx) {
      this.$emit('step-click', idx)
      if (idx === this.activedIdxInner) {
        return
      }
      if (idx <= this.maxStepIdx) {
        this.activedIdxInner = idx
        this.$emit('actived-change', idx)
      }
    },
  },
  beforeDestroy() {},
}
</script>

<style lang="scss" scoped>
.step-nav {
  // width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #999;
}
</style>
